import { Component } from 'react'
import { inject, observer } from 'mobx-react'
import { View, Text } from '@tarojs/components'
import { AtButton } from 'taro-ui'
import { AtTabs, AtTabsPane, AtSteps } from 'taro-ui'
import BasicInfo from './BasicInfo/index';
import DetailInfo from './DetailInfo'
import Requirement from './Requirement'
import './index.less'


import "taro-ui/dist/style/components/button.scss" // 按需引入
import './index.less'
import Taro from '@tarojs/taro'

@inject('store')
@observer
export default class Index extends Component {
  constructor (props) {
    super(props)
    this.state = {
      step: 0,
      items: [
        {
          title: '基本信息',
        },
        {
          title: '择偶要求',
        }
      ]
    }
  }
  handleClick (value) {
    this.setState({
      current: value
    })
  }

  componentWillMount () { }

  componentDidMount () {

  }

  componentWillUnmount () { }

  componentDidShow () { }


  componentDidHide () { }

  onChangeStep = (step) => {
    this.setState({
      step
    })
  }

  onBasicInfoSuccess = () => {
    const { items } = this.state
    items[0]['status'] = 'success'
    this.setState({
      items: [...items],
      step: 1
    })
  }

  onRequirementSuccess = () => {
    const { items } = this.state
    items[1]['status'] = 'success'
    const step1Success = items[0]['status'] == 'success'
    if (step1Success) {
      Taro.navigateBack()
      return
    }
    
    this.setState({
      items: [...items],
      step: 0
    })
  }

  render () {
    const { step, items } = this.state
    const id = this.props.store?.userInfo?.id

    return (
      <View className='personal-situation-page'>
        <AtSteps
          items={items}
          current={this.state.step}
        />
        {step == 0 && (
          <BasicInfo id={id} onSuccess={this.onBasicInfoSuccess} />
        )}
        {step == 1 && (
          <Requirement id={id} onSuccess={this.onRequirementSuccess} />
        )}
      </View>
    )
  }
}